<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">子项目管理</div>
          <el-input
            v-model="classSearchInput"
            placeholder="请输入项目名称"
            style="width: 150px"
            class="className"
          ></el-input>
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="选择开始时间"
            style="width: 150px"
            class="className1"
          ></el-date-picker>
          <div class="line2"></div>
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="选择结束时间"
            style="width: 150px"
            class="className"
          ></el-date-picker>
          <div style="position: relative">
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
          </div>
        </div>
        <div class="header-right">
          <img src="../../assets/images/back.png" class="addmsg1" @click="getback">
          <img
            src="../../assets/images/加号.png"
            class="addmsg"
            alt=""
            @click="handleAddSubProject"
            v-if="(Number(userInfo.roleId) == 1 || Number(userInfo.roleId) == 2) || 
        (Number(userInfo.userId) == Number(parentLeaderId) || 
         Number(userInfo.userId) == Number(SonleaderId))"
          />
        </div>
      </div>
    </div>
    <div class="class-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column  label="编号" align="center" >
          <template #default="scoped">
            {{ (currentPage - 1) * pageSize + scoped.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="任务名称" align="center" />
        <el-table-column prop="leader" label="负责人" align="center" />
        <el-table-column prop="taskDay" label="工时(天)" align="center" />
        <el-table-column prop="beginTime" label="开始时间" align="center" />
        <el-table-column prop="endTime" label="结束时间" align="center" />
        <el-table-column label="项目进度(%)" align="center">
          <template #default="scoped">
            <el-progress type="circle" :percentage="scoped.row.progress" :width="60" />
          </template>
        </el-table-column>
          <el-table-column label="占比重(%)" align="center">
          <template #default="scoped">
            <el-progress type="circle" :percentage="scoped.row.proportion" :width="60" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scoped">
            <el-button link type="success" @click="() => handleModify(scoped.row)" :disabled="!(userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.userId == scoped.row.leaderId )">修改</el-button>
            <el-button link type="danger" @click="() => handleDel(scoped.row)" :disabled="!(userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.userId == scoped.row.leaderId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
       <div class="page">
        <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentPageChange" />
        <div> 
            每页
            <el-input-number
              v-model="pageSize"
              :min="1"
              :max="30"
              controls-position="right"
              @change="handleChange"
            />条
        </div>
      </div>
    </div>

    <!-- 添加任务-->
    <el-dialog v-model="dialogVisible" title="添加任务" width="400px" :show-close="false">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="任务名称" prop="projectName">
            <el-input v-model="formData.projectName" placeholder="输入任务名称" />
          </el-form-item>
          <el-form-item label="负责人" prop="leaderId">
            <!-- 下拉框 -->
            <el-select v-model="formData.leaderId" placeholder="请选择负责人" @change="leaderChange">
               <el-option v-for="item in freeMember" :key="item.userId" :label="item.userName" :value="item.userId" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
              v-model="formData.beginTime"
              type="date"
              placeholder="请选择开始时间"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              type="date"
              placeholder="请选择结束时间"
              style="width: 200px"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="任务工期" prop="taskDay">
            <el-input v-model="formData.taskDay" placeholder="输入任务工期"/>
          </el-form-item>
          <el-form-item label="比重" prop="proportion">
            <el-input v-model="formData.proportion" style="width: 200px" placeholder="输入任务所占比重">
              <template #suffix>%</template>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm">确认</el-button>
      </template>
    </el-dialog>
     <!-- 修改任务 -->
  <el-dialog v-model="modifyDialogVisible" title="修改任务" width="400px" :show-close="false">
    <el-form
      :model="formData"
      :rules="rules1"
      ref="modifyFormRef"
      label-width="100px"
      hide-required-asterisk
    >
      <el-row>
        <el-form-item label="任务名称" prop="projectName">
          <el-input v-model="formData.projectName"  placeholder="输入任务名称"/>
        </el-form-item>
        <el-form-item label="负责人" prop="leaderId">
          <el-select v-model="formData.leaderId" placeholder="请选择负责人">
            <el-option v-for="item in modifyFreeMember" :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="开始时间" prop="beginTime">
          <el-date-picker
            v-model="formData.beginTime"
            type="date"
            placeholder="请选择开始时间"
            style="width: 200px"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="formData.endTime"
            type="date"
            placeholder="请选择结束时间"
            style="width: 200px"
             value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="任务工期" prop="taskDay">
          <el-input v-model="formData.taskDay" placeholder="输入任务工期"/>
        </el-form-item>
        <el-form-item label="比重" prop="proportion">
          <el-input v-model="formData.proportion" style="width: 200px" placeholder="输入任务所占比重">
            <template #suffix>%</template>
          </el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="任务进度" prop="progress">
          <el-input v-model="formData.progress" style="width: 200px" placeholder="输入任务进度">
            <template #suffix>%</template>
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="modifyDialogVisible = false" class="cancel">取消</el-button>
      <el-button type="primary" @click="handleModifyConfirm" class="confirm">确认</el-button>
    </template>
  </el-dialog>
  </div>
</template>
   
   <script setup>
import { ref ,onMounted} from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'
import {getTaskList,addTask,getFreeMember,updateTask,deleteTask} from '../api/SonProjectDetails'
import dayjs from 'dayjs' // 引入 dayjs 库用于日期计算

// 获取子项目的id
const parentProjectId = Number(useRoute().query.projectId); 

//获取父项目ID
const ProjectId = Number(useRoute().query.parentProjectId);
//获取父项目leaderId
const parentLeaderId = Number(useRoute().query.parentLeaderId);
//子项目leaderID
const SonleaderId = Number(useRoute().query.SonleaderId);
//子项目开始时间
const parentStart = useRoute().query.parentStart;
//子项目结束时间
const parentEnd = useRoute().query.parentEnd;
//本地存储的用户信息
const userInfo = JSON.parse(localStorage.getItem('user'));

// 表格数据
const tableData = ref([])

// 搜索条件
const classSearchInput = ref('')
const startDate = ref(null)
const endDate = ref(null)

// 分页相关变量
const currentPage = ref(1) // 当前页码
const pageSize = ref(7) // 每页显示条数
const total = ref(0) // 总条数

//本项目所有空闲成员
const freeMember = ref([])

//项目剩余比重
const allProportion = ref(0)

//除了当前项目外的比重
const allProportion1 = ref(0)

// 修改时的负责人选项列表
const modifyFreeMember = ref([])


//任务列表接口
function fetchData() {
  let data = {
     pageIndex: currentPage.value, // 当前页码
     pageSize: pageSize.value, // 每页显示条数
     parentProjectId: parentProjectId, // 父项目ID
  }
  if (classSearchInput.value) {
    data.projectName = classSearchInput.value // 搜索条件 
  }
  if (startDate.value && endDate.value) {
    data.beginTime = startDate.value // 开始时间
    data.endTime = endDate.value // 结束时间    
  }
  getTaskList("taskList",data).then((res) => {
    if (res.code === 200) {
      tableData.value = res.dataset.taskList // 表格数据
      total.value = res.dataset.pageCount * pageSize.value // 总条数
    } else {
      ElMessage.error("获取数据失败") // 错误提示
    }
  })
}

//获取本项目所有空闲成员
function getFreeMemberList(){
  let data = {
    projectId: ProjectId, // 父项目ID
  }
  getFreeMember("freeUsers2",data).then((res) => {
    if (res.code === 200) {
      freeMember.value = res.dataset
    }
  })
 
}


// 初始化时获取数据
onMounted(() => {
  fetchData() // 调用获取数据的函数
  getFreeMemberList() 
})

// 分页相关方法
const handleCurrentPageChange = (value) => {
  currentPage.value = value // 更新当前页码
  fetchData() // 重新获取数据
}

const handleSearch = () => {
  // 搜索逻辑
    if ((startDate.value && !endDate.value) || (!startDate.value && endDate.value)) {
    ElMessage.warning('请选择正确的时间段')
    return
  }
  // 重置页码为第一页
  currentPage.value = 1
  fetchData()

}


//任务负责人改变
const leaderChange = (value) => {
  freeMember.value.forEach(item => {
    if (item.userId === value) {
      formData.value.leader = item.userName // 负责人
    }
  })
}

// 计算项目剩余比重
function calculateAllProportion() {
    //遍历表格数据
    let sum = 0; // 初始化总和为0
    tableData.value.forEach(item => {
      sum += parseFloat(item.proportion); // 将每个项目的比重转换为数字并累加到总和中
    });
    allProportion.value = 100 - sum; // 计算剩余比重
}

//计算除了点击修改的项目外的比重
function calculateAllProportion1() {
    //遍历表格数据
    let sum = 0; // 初始化总和为0
    tableData.value.forEach(item => {
      if(item.projectId !== formData.value.projectId){
        sum += parseFloat(item.proportion); // 将每个项目的比重转换为数字并累加到总和中
      }
    });
    allProportion1.value = 100 - sum; // 计算剩余比重
}


// 添加任务模态框
// 新增：模态框显示状态
const dialogVisible = ref(false)
// 新增：表单数据
const formData = ref({
 projectName: '',
 leaderId: '',
 leader: '',
 beginTime: '',
 endTime: '',
 taskDay: '',
 proportion: '',
 parentProjectId: parentProjectId, // 子项目ID
 progress: 0, // 进度
})
// 新增：表单引用
const formRef = ref(null)
//任务比重不能大于剩余比重
const validateProportion = (rule, value, callback) => {
  if (Number(value) > allProportion.value) {
    callback(new Error(`任务比重不能大于剩余比重 ${allProportion.value}%`))
  } else {
    callback()
  }
}
//任务比重不能大于剩余比重
const validateProportion1 = (rule, value, callback) => {
  if (Number(value) > allProportion1.value) {
    callback(new Error(`任务比重不能大于剩余比重 ${allProportion1.value}%`))
  } else {
    callback()
  }
}
//开始时间必须在结束时间之前
const validateBeginTime = (rule, value, callback) => {
  if (formData.value.endTime && value) {
    const endTime = dayjs(formData.value.endTime)
    const beginTime = dayjs(value)
    if (endTime.isBefore(beginTime)) {
      callback(new Error('开始时间必须在结束时间之前'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 结束时间必须在开始时间之后
const validateEndTime = (rule, value, callback) => {
  if (formData.value.beginTime && value) {
    const beginTime = dayjs(formData.value.beginTime)
    const endTime = dayjs(value)
    if (endTime.isBefore(beginTime)) {
      callback(new Error('结束时间必须在开始时间之后'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
// 计算工期
const calculateTaskDay = () => {
  if (formData.value.beginTime && formData.value.endTime) {
    const beginTime = dayjs(formData.value.beginTime)
    const endTime = dayjs(formData.value.endTime)
    const days = endTime.diff(beginTime, 'day')
    formData.value.taskDay = days
  }
}

// 计算结束时间
const calculateEndTime = () => {
  if (formData.value.beginTime && formData.value.taskDay) {
    const beginTime = dayjs(formData.value.beginTime)
    const endTime = beginTime.add(parseInt(formData.value.taskDay), 'day')
    formData.value.endTime = endTime.format('YYYY-MM-DD')
  }
}

// 计算开始时间
const calculateBeginTime = () => {
  if (formData.value.endTime && formData.value.taskDay) {
    const endTime = dayjs(formData.value.endTime)
    const beginTime = endTime.subtract(parseInt(formData.value.taskDay), 'day')
    formData.value.beginTime = beginTime.format('YYYY-MM-DD')
  }
}
// 自定义项目进度验证函数
const validateProgress = (rule, value, callback) => {
  const progress = Number(value);
  if (isNaN(progress)) {
    callback(new Error('请输入有效的数字'));
  } else if (progress < 0 || progress > 100) {
    callback(new Error('任务进度在 0 到 100 之间'));
  } else {
    callback();
  }
};
// 新增：表单验证规则
const rules = ref({
  projectName: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
  ],
  leaderId: [
    { required: true, message: '请选择负责人', trigger: 'change' },
  ],
  beginTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' },
    { 
      validator: (rule, value, callback) => {
        const parentStartDate = dayjs(parentStart);
        const parentEndDate = dayjs(parentEnd);
        const currentDate = dayjs(value);
        
        if (currentDate.isBefore(parentStartDate)) {
          callback(new Error(`开始时间不能早于父项目开始时间`));
        } else if (currentDate.isAfter(parentEndDate)) {
          callback(new Error(`开始时间不能晚于父项目结束时间`));
        } else {
          callback();
        }
      },
      trigger: 'change'
    },
    { validator: validateBeginTime, trigger: 'change' },
    { validator: (rule, value, callback) => {
        if (value && formData.value.endTime) {
          calculateTaskDay()
        } else if (value && formData.value.taskDay) {
          calculateEndTime()
        }
        callback()
      }, trigger: 'change' }
  ],
    endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' },
    { 
      validator: (rule, value, callback) => {
        const parentStartDate = dayjs(parentStart);
        const parentEndDate = dayjs(parentEnd);
        const currentDate = dayjs(value);
        
        if (currentDate.isBefore(parentStartDate)) {
          callback(new Error(`结束时间不能早于父项目开始时间`));
        } else if (currentDate.isAfter(parentEndDate)) {
          callback(new Error(`结束时间不能晚于父项目结束时间`));
        } else {
          callback();
        }
      },
      trigger: 'change'
    },
    { validator: validateEndTime, trigger: 'change' },
    { validator: (rule, value, callback) => {
        if (value && formData.value.beginTime) {
          calculateTaskDay()
        } else if (value && formData.value.taskDay) {
          calculateBeginTime()
        }
        callback()
      }, trigger: 'change' }
  ],
  taskDay: [
    { required: true, message: '请输入任务工期', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (formData.value.beginTime && value) {
          calculateEndTime();
        } else if (formData.value.endTime && value) {
          calculateBeginTime();
        }
        callback();
      }, trigger: 'blur' }
  ],
  proportion: [
    { required: true, message: '请输入任务比重', trigger: 'blur' },
    { validator: validateProportion, trigger: 'blur' }
  ],
  progress: [
    { required: true, message: '请输入任务进度', trigger: 'blur' },
    { validator: validateProgress, trigger: 'blur' }
  ]
})
const rules1 = ref({
  projectName: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
  ],
  leaderId: [
    { required: true, message: '请选择负责人', trigger: 'change' },
  ],
  beginTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' },
    { validator: validateBeginTime, trigger: 'change' },
    { 
      validator: (rule, value, callback) => {
        const parentStartDate = dayjs(parentStart);
        const parentEndDate = dayjs(parentEnd);
        const currentDate = dayjs(value);
        
        if (currentDate.isBefore(parentStartDate)) {
          callback(new Error(`开始时间不能早于父项目开始时间`));
        } else if (currentDate.isAfter(parentEndDate)) {
          callback(new Error(`开始时间不能晚于父项目结束时间`));
        } else {
          callback();
        }
      },
      trigger: 'change'
    },
    { validator: (rule, value, callback) => {
        if (value && formData.value.endTime) {
          calculateTaskDay()
        } else if (value && formData.value.taskDay) {
          calculateEndTime()
        }
        callback()
      }, trigger: 'change' }
  ],
    endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' },
    { 
      validator: (rule, value, callback) => {
        const parentStartDate = dayjs(parentStart);
        const parentEndDate = dayjs(parentEnd);
        const currentDate = dayjs(value);
        
        if (currentDate.isBefore(parentStartDate)) {
          callback(new Error(`结束时间不能早于父项目开始时间`));
        } else if (currentDate.isAfter(parentEndDate)) {
          callback(new Error(`结束时间不能晚于父项目结束时间`));
        } else {
          callback();
        }
      },
      trigger: 'change'
    },
    { validator: validateEndTime, trigger: 'change' },
    { validator: (rule, value, callback) => {
        if (value && formData.value.beginTime) {
          calculateTaskDay()
        } else if (value && formData.value.taskDay) {
          calculateBeginTime()
        }
        callback()
      }, trigger: 'change' }
  ],
  taskDay: [
    { required: true, message: '请输入任务工期', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (formData.value.beginTime && value) {
          calculateEndTime();
        } else if (formData.value.endTime && value) {
          calculateBeginTime();
        }
        callback();
      }, trigger: 'blur' }
  ],
  proportion: [
    { required: true, message: '请输入任务比重', trigger: 'blur' },
    { validator: validateProportion1, trigger: 'blur' }
  ],
  progress: [
    { required: true, message: '请输入任务进度', trigger: 'blur' },
    { validator: validateProgress, trigger: 'blur' }
  ]
})

// 添加任务接口
function addTaskList() {
  let data = {
    projectName: formData.value.projectName, // 项目名称
    leaderId: formData.value.leaderId, // 负责人ID
    leader: formData.value.leader, // 负责人
    beginTime: formData.value.beginTime, // 开始时间 
    endTime: formData.value.endTime, // 结束时间
    taskDay: formData.value.taskDay, // 任务工期
    proportion: formData.value.proportion, // 任务比重
    parentProjectId: parentProjectId, // 父项目ID
    progress: 0, // 进度
  }
  addTask("addTask",data).then((res) => {
    if (res.code === 200) {
      ElMessage.success("添加成功") // 成功提示
      fetchData() // 重新获取数据
    } 
  })
}

// 新增：点击添加班级按钮方法
const handleAddSubProject = () => {
  // 重置表单数据
  formData.value = {
   projectName: '',
    leaderId: '',
    leader: '',
    beginTime: '',
    endTime: '',
    taskDay: '',
    proportion: '',
    parentProjectId: parentProjectId, // 子项目ID
    progress: 0, // 进度
  }
  if(formRef.value){
    formRef.value.clearValidate() // 清除表单验证 
  }
  calculateAllProportion() // 计算项目剩余比重
  dialogVisible.value = true
}

// 新增：点击确认按钮方法
const handleConfirm = () => {
  // 提交表单逻辑
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('是否确认添加该任务？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning' 
      }).then(() => {
        addTaskList() // 调用添加任务接口
        dialogVisible.value = false // 关闭模态框 
      }).catch(() => {
        ElMessage.info('已取消添加任务') // 取消添加任务提示
      })
    }
  })
}


// 修改子项目模态框相关变量
const modifyDialogVisible = ref(false)
const modifyFormRef = ref(null)

const handleModify = (row) => {
  if(modifyFormRef.value){
    modifyFormRef.value.clearValidate() // 清除表单验证 
  }
  // 将选中行的数据赋值给修改表单数据
  formData.value = { ...row }
   // 检查当前任务负责人是否在空闲成员列表中
  const isLeaderInFreeMember = freeMember.value.some(item => item.userId === row.leaderId)
  if (!isLeaderInFreeMember) {
    // 若不在，将当前任务负责人添加到修改时的选项列表中
    modifyFreeMember.value = [
      ...freeMember.value,
      { userId: row.leaderId, userName: row.leader }
    ]
    
  } else {
    // 若在，直接使用空闲成员列表
    modifyFreeMember.value = freeMember.value
  }
  calculateAllProportion() // 计算项目剩余比重
  calculateAllProportion1() // 计算除了点击修改的项目外的比重
  modifyDialogVisible.value = true
}


// 修改任务接口
function updateTaskList() {
  let data = {
     projectName: formData.value.projectName, // 项目名称
    leaderId: formData.value.leaderId, // 负责人ID
    leader: formData.value.leader, // 负责人
    beginTime: formData.value.beginTime, // 开始时间
    endTime: formData.value.endTime, // 结束时间
    taskDay: formData.value.taskDay, // 任务工期
    proportion: formData.value.proportion, // 任务比重
    projectId: formData.value.projectId, // 父项目ID
    progress: formData.value.progress, // 进度
  } 
  updateTask("updateTask",data).then((res) => {
    if (res.code === 200) {
      ElMessage.success("修改成功") // 成功提示
      fetchData() // 重新获取数据
    }
  })
}
// 修改：点击确认按钮方法
const handleModifyConfirm = () => {
  modifyFormRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('是否确认修改该任务？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning' 
      }).then(() => {
        updateTaskList() // 调用修改任务接口
        modifyDialogVisible.value = false // 关闭模态框 
      }).catch(() => {
        ElMessage.info('已取消修改任务') // 取消修改任务提示 
      })
      
    }
  })
}
// 删除任务接口
function deleteTaskList(id) {
  let data = {
    projectId: id, // 项目ID
  } 
  deleteTask("deleteTask",data).then((res) => {
    if (res.code === 200) {
      ElMessage.success("删除成功") // 成功提示
      fetchData() // 重新获取数据
    }
  })
}

//删除
const handleDel = (row) => {
  ElMessageBox.confirm('是否确认删除该任务？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning' 
  }).then(() => {
    deleteTaskList(row.projectId) // 调用删除任务接口 
  }).catch(() => {
    ElMessage.info('已取消删除任务') // 取消删除任务提示
  })
}

function getback() {
  window.history.go(-1)
}
 function handleChange(){
  currentPage.value = 1; // 重置页码为1
  fetchData()
 }

</script>
   
   <style scoped>
     .addmsg1 {
  width: 25px;
  height: 25px;
  margin-right: 20px;
  cursor: pointer;
}
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
.line2 {
  width: 10px;
  height: 2px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #9b9b9b;
}
:deep(.className .el-input__wrapper){
  border-radius: 12px !important;
}
:deep(.className1 .el-input__wrapper){
  border-radius: 12px !important;
}
.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 16px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.addmsg {
  width: 25px;
  height: 25px;
}


/* 表格区域 */
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表格数据 */
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}
:deep(.details1) {
  margin-left: 55px;
}
/* 分页 */
.page {
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}

/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-dialog__body){
  display: flex;
  justify-content: center;
}
:deep(.el-select) {
  width: 200px;
}
:deep(.el-dialog__footer) {
  text-align: center;
  padding-bottom: 20px;
}
:deep(.confirm) {
  margin-left: 50px;
  background-color: #0f6ab1;
}
:deep(.cancel) {
  background-color: #0f6ab1;
  color: white;
}

</style>